{{#accordion-list showExpandAll=false as | al expandFn |}}
  {{#accordion-list-item title=(t 'clusterNew.tencenttke.access.title')
       detail=(t 'clusterNew.tencenttke.access.detail')
       expandAll=expandAll
       expand=(action expandFn)
       expandOnInit=true
  }}
    <div class="row">
      <div class="col span-4">
        <label class="acc-label">{{t 'clusterNew.tencenttke.region.label'}}</label>
        {{#if (eq step 1)}}
          {{searchable-select class="form-control"
            content=regionChoices
            value=config.region
          }}
        {{else}}
          <div>{{config.region}}</div>
        {{/if}}
      </div>
      <div class="col span-4">
        <label class="acc-label">{{t 'clusterNew.tencenttke.secretId.label'}}{{field-required}}</label>
        {{#if (eq step 1)}}
          {{input type="text" name="username" classNames="form-control" placeholder=(t 'clusterNew.tencenttke.secretId.placeholder') value=config.secretId}}
        {{else}}
          <div>{{config.secretId}}</div>
        {{/if}}
      </div>
      <div class="col span-4">
        <label class="acc-label">{{t 'clusterNew.tencenttke.secretKey.label'}}{{field-required}}</label>
        {{#if (eq step 1)}}
          {{input type="password" name="password" classNames="form-control" placeholder=(t 'clusterNew.tencenttke.secretKey.placeholder') value=config.secretKey}}
        {{else}}
          <div class="text-muted text-italic">{{t 'clusterNew.tencenttke.secretKey.provided'}}</div>
        {{/if}}
      </div>
    </div>
  {{/accordion-list-item}}
  {{#if (eq step 1)}}
    {{save-cancel editing=(eq mode 'edit')
        save="tencentLogin"
        cancel=close
        createLabel="clusterNew.tencenttke.access.next"
        savingLabel="clusterNew.tencenttke.access.loading"
    }}
  {{/if}}
  {{#if (gte step 2)}}
    {{#accordion-list-item title=(t 'clusterNew.tencenttke.cluster.title')
         detail=(t 'clusterNew.tencenttke.cluster.detail')
         showExpand=false
         expandOnInit=true
         expandAll=al.expandAll
         expand=(action expandFn)
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.version.label'}}</label>
          {{#if (eq step 2)}}
            {{searchable-select class="form-control"
              content=versionChoices
              value=config.clusterVersion
            }}
          {{else}}
            <div>{{config.clusterVersion}}</div>
          {{/if}}
        </div>
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.goodsNum.label'}}{{field-required}}</label>
          {{#if (eq step 2)}}
            {{input-integer min=1 max=100 value=config.goodsNum classNames="form-control" placeholder=(t 'clusterNew.tencenttke.goodsNum.placeholder')}}
            <p class="help-block">
              {{t 'clusterNew.tencenttke.goodsNum.help'}}
            </p>
          {{else}}
            <div>{{config.goodsNum}}</div>
          {{/if}}
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.vpc.label'}}{{field-required}}</label>
          {{#if (eq step 2)}}
            {{searchable-select class="form-control"
              content=vpcChoices
              value=config.vpcId
            }}
          {{else}}
            <div>{{config.vpcId}}</div>
          {{/if}}
        </div>
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.cidr.label'}}{{field-required}}</label>
          {{#if (eq step 2)}}
            {{input type="text" value=config.clusterCidr placeholder=(t 'clusterNew.tencenttke.cidr.placeholder')}}
          {{else}}
            <div>{{config.clusterCidr}}</div>
          {{/if}}
        </div>
      </div>
    {{/accordion-list-item}}
    {{#if (eq step 2)}}
      {{save-cancel editing=(eq mode 'edit')
          save="loadNodeConfig"
          cancel=close
          createLabel="clusterNew.tencenttke.cluster.next"
          savingLabel="clusterNew.tencenttke.cluster.loading"
      }}
    {{/if}}
  {{/if}}
  {{#if (gte step 3)}}
    {{#accordion-list-item title=(t 'clusterNew.tencenttke.node.title')
         detail=(t 'clusterNew.tencenttke.node.detail')
         showExpand=false
         expandOnInit=true
         expandAll=al.expandAll
         expand=(action expandFn)
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.zone.label'}}{{field-required}}</label>
          {{#if (eq step 3)}}
            {{searchable-select class="form-control"
              content=zoneChoices
              value=config.zoneId
            }}
          {{else}}
            <div>{{selectedZone.label}}</div>
          {{/if}}
        </div>
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.subnet.label'}}{{field-required}}</label>
          {{#if (eq step 3)}}
            {{searchable-select class="form-control"
              content=subnetChoices
              value=config.subnetId
            }}
          {{else}}
            <div>{{config.subnetId}}</div>
          {{/if}}
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.instanceType.label'}}{{field-required}}</label>
          {{#if (eq step 3)}}
            {{searchable-select class="form-control"
              content=instanceChoices
              value=config.instanceType
            }}
          {{else}}
            <div>{{config.instanceType}}</div>
          {{/if}}
        </div>
      </div>
    {{/accordion-list-item}}
    {{#if (eq step 3)}}
      {{save-cancel editing=(eq mode 'edit')
          save="loadInstanceConfig"
          cancel=close
          createLabel="clusterNew.tencenttke.node.next"
          savingLabel="clusterNew.tencenttke.node.loading"
      }}
    {{/if}}
  {{/if}}
  {{#if (gte step 4)}}
    {{#accordion-list-item title=(t 'clusterNew.tencenttke.instance.title')
         detail=(t 'clusterNew.tencenttke.instance.detail')
         showExpand=false
         expandOnInit=true
         expandAll=al.expandAll
         expand=(action expandFn)
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.os.label'}}</label>
          {{searchable-select class="form-control"
            content=osChoices
            value=config.osName
          }}
        </div>
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.securityGroup.label'}}{{field-required}}</label>
          {{searchable-select class="form-control"
            content=sgChoices
            value=config.sgId
          }}
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.rootType.label'}}</label>
          {{searchable-select class="form-control"
            content=rootDiskChoices
            localizedLabel=true
            value=config.rootType
          }}
        </div>
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.rootSize.label'}}</label>
          <div class="input-group">
            {{input-integer min=20 max=50 value=config.rootSize classNames="form-control" placeholder=(t 'clusterNew.tencenttke.rootSize.placeholder')}}
            <span class="input-group-addon bg-default">{{t 'generic.gigabyte'}}</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.storageType.label'}}</label>
          {{searchable-select class="form-control"
            content=storageDiskChoices
            localizedLabel=true
            value=config.storageType
          }}
        </div>
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.storageSize.label'}}</label>
          <div class="input-group">
            {{input-integer min=0 value=config.storageSize classNames="form-control" placeholder=(t 'clusterNew.tencenttke.storageSize.placeholder')}}
            <span class="input-group-addon bg-default">{{t 'generic.gigabyte'}}</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.bandwidthType.label'}}</label>
          {{searchable-select class="form-control"
            content=bandWidthChoices
            localizedLabel=true
            value=config.bandwidthType
          }}
        </div>
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.bandwidth.label'}}</label>
          <div class="input-group">
            {{input-integer min=0 value=config.bandwidth classNames="form-control" placeholder=(t 'clusterNew.tencenttke.bandwidth.placeholder')}}
            <span class="input-group-addon bg-default">{{t 'generic.mbps'}}</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">{{t 'clusterNew.tencenttke.keyPair.label'}}{{field-required}}</label>
          {{searchable-select class="form-control"
            content=keyChoices
            value=config.keyId
          }}
        </div>
      </div>
    {{/accordion-list-item}}
    {{save-cancel editing=(eq mode 'edit')
        save="save"
        cancel=close
    }}
  {{/if}}
  {{top-errors errors=errors}}
  {{top-errors errors=otherErrors}}
  {{top-errors errors=clusterErrors}}
{{/accordion-list}}